<template>
  <div class="payment-code">
    <div class="header">
      <span class="back-arrow">&lt;</span>
      <span class="title">易货收款码</span>
    </div>
    <div class="content">
      <div class="title" v-if="false">商户收款码</div>
      <div class="description">请用微信扫此码向我付款</div>
      <div class="qr-code" v-if="qrCodeUrl">
        <image :src="qrCodeUrl" class="qr-image" mode="widthFix"></image>
      </div>
      <div class="qr-code-placeholder" v-else>
        <div class="loading">二维码生成中...</div>
      </div>
      <div class="amount-input" style="display: flex;">
		  请输入收款金额(元):
        <input 
          type="text" 
          v-model="amount" 
          placeholder="" 
			style="width:100px;text-align: right;"
			@input="remake()"
        />元
		<!--
		class="amount-field"
		@input="formatAmount"
		step="1"
		min="1"
		max="1000000"
		-->
      </div>
      <div class="tips">
        <text class="tips-text">* 微信扫此码可直接付款</text>
      </div>
      <div class="save-button" @click="generatePaymentQRCode" v-if="false" >重生收款码</div>
      <div class="save-button" @click="saveQRCode" >保存收款码</div>
    </div>
    <div class="footer" v-if="false">
      <div class="account-info">收款账号: {{ merchantName }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PaymentCode',
  data() {
    return {
      amount: '100.0', // 收款金额
      qrCodeUrl: '', // 二维码图片URL
      merchantName: '商户名称', // 商户名称
      orderId: '', // 订单ID
      merchantId: '', // 商户ID
	  userInfo:{},
    };
  },
  onLoad() {
    // 页面加载时获取商户信息
   
	this.loadUserLoginStatus();
	
  },
  methods: {
	  async remake(){
		  this.generatePaymentQRCode();
	  },
	   loadUserLoginStatus() {
		  var that = this;
	  	 uni.request({
	  		url: '/wanlshop/user/refresh',
	  		method: 'POST',
	  		success: res => {
				console.log(res.data);
	  			that.userInfo=res.data.userinfo;
	  			//if(this.userInfo.)
	  			 this.getMerchantInfo();
	  			this.$store.commit('statistics/edit', res.data.statistics);
	  			this.$store.commit('user/setUserInfo', res.data.userinfo);
	  		}
	  	});
	  	uni.stopPullDownRefresh();
	  },
    /**
     * 获取商户信息
     * 从服务器获取当前商户的基本信息
     */
    async getMerchantInfo() {
		this.generatePaymentQRCode();
		/*
      try {
		  
        // 获取商户信息的实际API调用
        // 这里需要替换为项目中实际的API地址
        const [error, res] = await uni.request({
          url: this.$wanlshop.api.url + '/wanlshop/merchant/info', // 商户信息接口
          method: 'GET',
          header: {
            'token': uni.getStorageSync('token') // 用户token验证
          }
        });
        
        if (res && res.data && res.data.code === 1) {
          this.merchantName = res.data.data.name || '我的商户店';
          this.merchantId = res.data.data.id || '';
        } else {
          console.warn('获取商户信息失败:', res ? res.data.msg : '请求失败');
          // 使用默认值
          this.merchantName = '我的商户店';
        }
      } catch (error) {
        console.error('获取商户信息异常:', error);
        // 使用默认值
        this.merchantName = '我的商户店';
      }*/
    },
    
    /**
     * 格式化金额输入
     * 限制只能输入数字和小数点，且小数点后最多两位
     */
    formatAmount() {
      // 获取当前输入值
      let val = this.amount;
      /*
      // 如果输入为空，直接返回
      if (val === '' || val === null || val === undefined) {
        return;
      }
      
      // 转换为字符串处理
      val = String(val);
      
      // 清除数字和小数点以外的字符
      val = val.replace(/[^\d.]/g, '');
      
      // 验证第一个字符是数字而不是小数点
      val = val.replace(/^\./g, '');
      
      // 只保留第一个小数点，清除多余的
      val = val.replace(/\.{2,}/g, '.');
      
      // 处理小数点位置
      val = val.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
      
      // 只能输入两个小数
      val = val.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
      
      // 确保只保留一个小数点，并限制小数点后最多两位
      if (val.indexOf('.') !== -1) {
        const parts = val.split('.');
        if (parts[1] && parts[1].length > 2) {
          parts[1] = parts[1].substring(0, 2);
          val = parts[0] + '.' + parts[1];
        }
      }
      */
      // 更新金额值
      this.amount = val;
    },
    
    /**
     * 生成收款二维码
     * 调用微信Native支付接口生成收款二维码
     */
    async generatePaymentQRCode() {
		console.log("this.userInfo.id",this.userInfo);
		
      // 验证输入金额
      if (!this.amount || parseFloat(this.amount) <= 0) {
        uni.showToast({
          title: '请输入有效的收款金额',
          icon: 'none'
        });
        return;
      }
      
      // 限制金额为最多两位小数
      const amount = parseFloat(parseFloat(this.amount).toFixed(2));
      
      // 验证金额范围（微信支付限制）
      if (amount < 0.01) {
        uni.showToast({
          title: '收款金额不能小于0.01元',
          icon: 'none'
        });
        return;
      }
      
      if (amount > 100000) {
        uni.showToast({
          title: '收款金额不能大于10万元',
          icon: 'none'
        });
        return;
      }
      
      uni.showLoading({
        title: '生成收款码中...'
      });
        // 调用后端API生成微信支付二维码
	  var url = '/xiangapi/shop_qrcode'; // this.$wanlshop.api.url + '/wanlshop/pay/createNativeOrder'
	  await uni.request({
	  	url: url,
	  	method:"POST",
		header: {
		  'Content-Type': 'application/json',
		  'token': uni.getStorageSync('token') // 用户token验证
		},
		data: {
		  merchant_id: this.userInfo.id, // 商户ID
		  amount: amount, // 收款金额(单位:元)
		  body: `${this.merchantName}收款`, // 商品描述
		  attach: 'merchant_payment' // 附加数据
		},
	  	success: (res) => {
	  	
	  		console.log(res,'是否隐藏')
			
			if (res && res.data && res.res.code === 1) {
				console.log("url",res.res.data.qr_code_url);
			  // 成功获取二维码链接
			  this.qrCodeUrl = res.res.data.qr_code_url; // 微信返回的二维码链接
			this.orderId = res.res.data.order_id; // 订单ID
			  
			  uni.showToast({
				title: '收款码生成成功',
				icon: 'success'
			  });
			} else {
			  uni.showToast({
				title: (res && res.data && res.data.msg) ? res.data.msg : '生成收款码失败',
				icon: 'none'
			  });
			}
	  	}
	  })
	  
     
    },
    
    /**
     * 保存二维码到相册
     * 支持H5、App和小程序环境
     */
    saveQRCode() {
      if (!this.qrCodeUrl) {
        uni.showToast({
          title: '请先生成收款码',
          icon: 'none'
        });
        return;
      }
      
      // #ifdef H5
      // H5环境下载图片
      const link = document.createElement('a');
      link.href = this.qrCodeUrl;
      link.download = 'merchant_payment_qr.png';
      link.click();
      // #endif
      
      // #ifndef H5
      // App和小程序环境保存到相册
      uni.downloadFile({
        url: this.qrCodeUrl,
        success: (res) => {
          if (res.statusCode === 200) {
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: () => {
                uni.showToast({
                  title: '收款码已保存到相册',
                  icon: 'success'
                });
              },
              fail: () => {
                uni.showToast({
                  title: '保存失败，请重试',
                  icon: 'none'
                });
              }
            });
          }
        },
        fail: () => {
          uni.showToast({
            title: '下载收款码失败',
            icon: 'none'
          });
        }
      });
      // #endif
    }
  }
};
</script>

<style scoped>
/* 整体页面容器 */
.payment-code {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5; /* 页面背景色 */
}

/* 头部导航栏 */
.header {
  background-color: #e54d42; /* 主题色 */
  color: white;
  padding: 15px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 返回箭头 */
.back-arrow {
  margin-right: 10px;
  font-size: 18px;
}

/* 页面标题 */
.title {
  font-size: 18px;
  font-weight: bold;
}

/* 内容区域 */
.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 30px 20px;
  background-color: white;
  margin: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* 轻微阴影 */
}

/* 内容区标题 */
.content .title {
  color: #e54d42; /* 主题色 */
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 描述文字 */
.content .description {
  color: #666;
  margin-bottom: 30px;
  font-size: 16px;
}

/* 二维码显示区域 */
.qr-code {
  margin-bottom: 30px;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* 二维码图片 */
.qr-image {
  width: 200px;
  height: 200px;
}

/* 二维码占位符 */
.qr-code-placeholder {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  border: 1px dashed #ddd;
  border-radius: 10px;
  margin-bottom: 30px;
}

/* 加载提示 */
.loading {
  color: #999;
  font-size: 16px;
}

/* 金额输入框容器 */
.amount-input {
  width: 100%;
  margin-bottom: 20px;
}

/* 金额输入框 */
.amount-field {
  width: 100%;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  text-align: center;
  box-sizing: border-box;
}

/* 提示信息 */
.tips {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

/* 提示文字 */
.tips-text {
  color: #999;
  font-size: 14px;
}

/* 操作按钮 */
.save-button {
  width: 100%;
  padding: 15px;
  background-color: #e54d42; /* 主题色 */
  color: white;
  text-align: center;
  border-radius: 8px;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(229, 77, 66, 0.3); /* 按钮阴影 */
  transition: background-color 0.3s; /* 背景色过渡效果 */
}

/* 按钮按下效果 */
.save-button:active {
  background-color: #d43c33;
}

/* 底部信息栏 */
.footer {
  background-color: #e54d42; /* 主题色 */
  color: white;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 顶部阴影 */
}

/* 账户信息 */
.account-info {
  font-size: 16px;
  font-weight: bold;
}
</style>